<template>
  <!-- 官网 -->
  <main class="wss-container">
    <ComTabs @EventSelectTab="currentSelect" :activeName="activeName" :tabList="tabList"></ComTabs>
    <div class="main-div">
      <HotWordSet v-if="activeName == 'hotWordSet'"></HotWordSet>
      <SelectMaterial v-if="activeName == 'selectMaterial'"></SelectMaterial>
      <Write v-if="activeName == 'write' "></Write>
      <Setting v-if="activeName == 'setting' "></Setting>
    </div>
  </main>
</template>

<script>
import ComTabs from "@/wss/components/ComTabs.vue";
import HotWordSet from "./hotwordset/index.vue";
import SelectMaterial from "./selectmaterial/index.vue";
import Setting from "./setting/index.vue";
import Write from "./write/index.vue";

export default {
  components: { ComTabs, HotWordSet, SelectMaterial, Setting, Write },
  data() {
    return {
      activeName: "hotWordSet",
      // tab页数据
      tabList: [
        {
          label: "热词设置",
          name: "hotWordSet"
        },
        {
          label: "选择素材",
          name: "selectMaterial"
        },
        {
          label: "写作",
          name: "write"
        },
        {
          label: "官网设置",
          name: "setting"
        }
      ]
    };
  },
  methods: {
    currentSelect({ label, index, name }) {
      this.activeName = name;
    },

    // 合同编辑不能看编辑中心的内容
    isEditLook() {
      let roles = this.$store.state.user.roles;
      if (roles.includes("htbj")) {
        return true;
      } else {
        return false;
      }
    }
  }
};
</script>

<style scoped>
/* .wss-container{
  display: flex;
  flex-direction: column;
  overflow: initial;
}
.wss-container .el-tabs{
  height: 40px;
  margin-bottom: 20px;
} */
.main-div {
  height: calc(100% - 54px);
}
.wss-container {
  display: flex;
  flex-direction: column;
}
.wss-container .tab-box {
  height: 40px;
  margin-bottom: 20px;
}
.wss-container .main-box {
  height: calc(100% - 60px);
}
</style>